<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><span style="font-size: 14px;"
                        >智提升</span
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item
                    ><a style="font-weight: 500;font-size: 14px;"
                        >同步</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item
                    ><a style="font-weight: 500;font-size: 14px;"
                        >趣练</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 14px;">趣练报告</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="title">趣练报告</div>

        <div class="bodyBox">
            <template v-if="status">
                <div class="titleImg">
                    <img src="@/assets/images/result/OK@2x.png" />
                </div>
                <div class="fractionBox">
                    <span class="fractionNum">闯关成功</span>
                    <img src="@/assets/images/result/ok.png" class="rightOk" />
                    <img
                        src="@/assets/images/result/start.png"
                        class="leftStart"
                    />
                </div>
                <div class="thankText">感谢您的作答！</div>
                <div class="percentage" v-if="datas && datas.acc">
                    {{ datas.acc }}%
                </div>
                <div class="correctRow">
                    <img src="@/assets/images/result/good.png" />
                    <div class="correctText">正确率</div>
                </div>
            </template>
            <template v-else>
                <div class="titleImg">
                    <img src="@/assets/images/result/failed.png" />
                </div>
                <div class="fractionBox">
                    <span class="fractionNum1">你失败了!</span>
                    <img
                        src="@/assets/images/result/false.png"
                        class="rightOk"
                    />
                    <img
                        src="@/assets/images/result/false.png"
                        class="leftStart"
                    />
                </div>
                <div class="thankText">感谢您的作答！</div>
                <div class="percentage1" v-if="datas && datas.acc">
                    {{ datas.acc }}%
                </div>
                <div class="correctRow">
                    <img src="@/assets/images/result/noGood.png" />
                    <div class="correctText">正确率</div>
                </div>
            </template>
            <div class="time">
                <div class="startTime">开始时间:{{ starttime }}</div>
                <div class="endTime">结束时间:{{ endtime }}</div>
            </div>
            <div class="analysisTitle">
                <div class="analysisTitleText">答题解析</div>
                <div class="selectBtnGround" v-if="isShowCheck">
                    <!-- <div class="switchBtn">
                        <div class="isSwicth">全部解析</div>
                        <div>错题解析</div>
                    </div> -->
                    <!-- <div class="analysisBtn3">订正错题</div> -->
                </div>
            </div>
            <el-divider></el-divider>
            <div class="analysisBtnGround" v-if="!isShowCheck">
                <div class="analysisBtn2" @click="isShowCheck = !isShowCheck">
                    查看答题解析
                </div>
            </div>
            <!-- 题 -->
            <div class="topic" v-if="isShowCheck">
                <div
                    class="topic-item"
                    v-for="(item, index) in datas1"
                    :key="index"
                >
                    <div class="div-flex">
                        <div class="topic-item-title">
                            {{ index + 1 }}、<el-tag
                                effect="plain"
                                size="mini"
                                >{{ item.question_type_name }}</el-tag
                            >
                            {{ item.question_title }}
                        </div>
                        <!-- <div class="topic-item-start">
                            <i
                                style="color: rgb(255,165,68);margin-right: 5px;"
                                class="el-icon-star-off"
                            ></i
                            >标记
                        </div> -->
                    </div>
                    <template
                        v-if="
                            (item.question_typeid != 3 &&
                                item.is_one_choice == 2) ||
                                item.is_many_choice == 2
                        "
                    >
                        <div
                            class="analysis_text"
                            v-for="(val, id) in item.answer_list"
                            :key="id"
                        >
                            <div>{{ val.text }}、</div>
                            <div v-html="val.answer"></div>
                        </div>
                    </template>
                    <div
                        class="topic-item-answer"
                        v-if="item.is_sub_question == 1"
                    >
                        <div class="div-flex-false">
                            <div>你的答案：</div>
                            <div>
                                <template v-if="item.question_typeid == 11">
                                    <div>
                                        <image
                                            class="yulanImg firstCanvas"
                                            :src="
                                                'data:image/jpeg;base64,' +
                                                    item.myanswer
                                            "
                                            :style="{
                                                background:
                                                    'url(' +
                                                    item.question_photo +
                                                    ') no-repeat'
                                            }"
                                            mode="aspectFit"
                                        ></image>
                                    </div>
                                </template>
                                <template v-else>
                                    <div>
                                        {{
                                            item.myanswer == "" ||
                                            item.myanswer == "undefined"
                                                ? "没答题"
                                                : item.myanswer
                                        }}
                                    </div>
                                </template>
                            </div>
                            <div style="margin-left: 8px;" class="div-flex">
                                <i
                                    v-if="item.is_answer == 2"
                                    class="el-icon-check"
                                    style="color: #18db60;font-size: 22px;margin-left: 3px;"
                                ></i>
                                <i
                                    v-else
                                    class="el-icon-close"
                                    style="color: red;font-size: 22px;margin-left: 3px;"
                                ></i>
                            </div>
                        </div>
                        <div class="div-flex-true">
                            <div>正确答案：</div>
                            <div v-html="item.answer"></div>
                        </div>
                    </div>
                    <div class="topic-item-analysis">
                        <div class="topic-item-label">答案解析：</div>
                        <div
                            class="analysisMore"
                            v-html="item.question_analysis"
                        ></div>
                    </div>
                    <div
                        class="checkSub"
                        v-if="item.isShowSubText"
                        @click="checkSub(index)"
                    >
                        查看子题
                    </div>
                    <!-- 子试题答案解析 -->
                    <template v-if="item.isShowSub">
                        <div
                            v-for="(item3, index3) in item.sub_question_list"
                            :key="index3"
                        >
                            <div class="div-flex">
                                <div class="topic-item-title">
                                    {{ index3 + 1 }}、<el-tag
                                        effect="plain"
                                        size="mini"
                                        >{{ item3.question_type_name }}</el-tag
                                    >
                                    {{ item3.question_title }}
                                </div>
                                <!-- <div class="topic-item-start">
                            <i
                                style="color: rgb(255,165,68);margin-right: 5px;"
                                class="el-icon-star-off"
                            ></i
                            >标记
                        </div> -->
                            </div>
                            <template
                                v-if="
                                    (item3.question_typeid != 3 &&
                                        item3.is_one_choice == 2) ||
                                        item3.is_many_choice == 2
                                "
                            >
                                <div
                                    class="analysis_text"
                                    v-for="(val1, id1) in item3.answer_list"
                                    :key="id1"
                                >
                                    <div>{{ val1.text }}、</div>
                                    <div v-html="val1.answer"></div>
                                </div>
                            </template>
                            <div
                                class="topic-item-answer"
                                v-if="item3.is_sub_question == 1"
                            >
                                <div class="div-flex-false">
                                    <div>你的答案：</div>
                                    <div>
                                        <template
                                            v-if="item3.question_typeid == 11"
                                        >
                                            <div>
                                                <image
                                                    class="yulanImg firstCanvas"
                                                    :src="
                                                        'data:image/jpeg;base64,' +
                                                            item3.myanswer
                                                    "
                                                    :style="{
                                                        background:
                                                            'url(' +
                                                            item3.question_photo +
                                                            ') no-repeat'
                                                    }"
                                                    mode="aspectFit"
                                                ></image>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div>
                                                {{
                                                    item3.myanswer == "" ||
                                                    item3.myanswer ==
                                                        "undefined"
                                                        ? "没答题"
                                                        : item3.myanswer
                                                }}
                                            </div>
                                        </template>
                                    </div>
                                    <div
                                        style="margin-left: 8px;"
                                        class="div-flex"
                                    >
                                        <i
                                            v-if="item3.is_answer == 2"
                                            class="el-icon-check"
                                            style="color: #18db60;font-size: 22px;margin-left: 3px;"
                                        ></i>
                                        <i
                                            v-else
                                            class="el-icon-close"
                                            style="color: red;font-size: 22px;margin-left: 3px;"
                                        ></i>
                                    </div>
                                </div>
                                <div class="div-flex-true">
                                    <div>正确答案：</div>
                                    <div v-html="item3.answer"></div>
                                </div>
                            </div>
                            <div class="topic-item-analysis">
                                <div class="topic-item-label">答案解析：</div>
                                <div
                                    class="analysisMore"
                                    v-html="item3.question_analysis"
                                ></div>
                            </div>
                            <el-divider
                                v-if="
                                    index3 != item.sub_question_list.length - 1
                                "
                            ></el-divider>
                        </div>
                    </template>
                    <el-divider></el-divider>
                </div>
            </div>
            <div class="analysisTitle2">
                <div class="analysisTitleText">作业情况</div>
                <div class="boxState">
                    <div class="correctBox"></div>
                    <div>正确</div>
                    <div class="errBox"></div>
                    <div>错误</div>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="indexItemBox">
                <div
                    :class="[
                        item1.is_answer == 1 || item1.is_answer == 0
                            ? 'itemBoxIsFalse'
                            : item1.is_answer == 2
                            ? 'itemBoxIsTrue'
                            : ''
                    ]"
                    v-for="(item1, index1) in datas.interest_answer_lists"
                    :key="index1"
                >
                    {{ index1 + 1 }}
                </div>
            </div>
            <div class="bottomBtn">
                <div class="analysisBtn1" @click="gobereaking">
                    {{ stateName }}
                </div>
                <div class="backBtn" @click="toInterestList">趣练列表</div>
            </div>
        </div>
        <dialog1
            ref="dialog1"
            v-if="isPropup == 1"
            @confirm="confirm"
        ></dialog1>
    </div>
</template>

<script>
import {
    InterestPresentation,
    getInterestDetail,
    InterestAnalysis
} from "@/api/InterestingPractice/index";
import { getFormatTime } from "@/utils/timeUtils";
import {
    getAnalysis,
    getTypeName,
    latex_reques,
    latex_answer
} from "@/utils/latex";
import dialog1 from "@/components/dialog1/index";
export default {
    components: {
        dialog1
    },
    props: {},
    data() {
        return {
            interest_id: "",
            status: true,
            percent: 0,
            datas: [],
            datas1: [], //题目解析列表
            endtime: "",
            starttime: "",
            gain: false, // 获得奖章时弹出奖章,
            score: false, // 获得学情分时弹出,
            gain_glod: false, // is_close is_medal 都为1时显示勋章和金币图
            section_name: "", // 试题名称
            zid: "", // 章节id,
            // 拿到传递过来的做题状态，来显示不同的勋章
            is_close: "",
            is_medal: "",
            isPropup: 0, // 需要区分是哪个页面进来的，交卷后进来才可以显示今日弹窗状态为1
            isShowUp: true, // 组件今日学情弹窗的显示/隐藏
            stateName: "继续闯关",
            isShowCheck: false,
            isShowSubText: true
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.isPropup = Number(this.$route.query.isPropup);
        // 勋章和学情分的弹窗判断。
        if (
            Number(this.$route.query.is_close) == 1 &&
            Number(this.$route.query.is_medal) == 1
        ) {
            // 两个都为1的话 就显示勋章金币图片
            this.gain_glod = true;
            this.is_close = Number(this.$route.query.is_close);
            this.is_medal = Number(this.$route.query.is_medal);
        } else if (
            Number(this.$route.query.is_close) == 1 &&
            !this.$route.query.is_medal
        ) {
            // 只有学情分为1，没有勋章，那么就只显示学情分图片
            this.score = true;
            this.is_close = Number(this.$route.query.is_close);
        } else if (
            Number(this.$route.query.is_medal) == 1 &&
            !this.$route.query.is_close
        ) {
            // 只有勋章为1，没有学情分，那么就只显示勋章图片
            this.gain = true;
            this.is_medal = Number(this.$route.query.is_medal);
        }

        this.gain = this.$route.query.gain;
        this.interest_id = this.$route.query.interest_id;
        this.zid = this.$route.query.zid;
        this.section_name = this.$route.query.section_name;
        this.getInterestingReport();
        this.getInterestAnalysis();
    },
    methods: {
        initData() {
            let afterDate = this.cuoTiList.map(item => {
                if (item.analysis.length > this.maxlength) {
                    item.fold = true;
                    item.intercept =
                        item.analysis.trim().substring(0, this.maxlength) +
                        "...";
                } else {
                    item.fold = false;
                    item.intercept = item.analysis;
                }
                return item;
            });
            this.cuoTiList = JSON.parse(JSON.stringify(afterDate));
        },
        getInterestingReport() {
            InterestPresentation({ interest_id: this.interest_id }).then(
                res => {
                    if (res.code == 200) {
                        this.datas = res.data;
                        this.starttime = getFormatTime(this.datas.creat_time);
                        this.endtime = getFormatTime(this.datas.update_time);
                        this.percent = parseInt(
                            this.datas.correctness_rate * 100
                        );
                        let str = Number(
                            this.datas.correctness_rate * 100
                        ).toFixed(0);
                        this.datas.acc = str;
                        if (this.datas.correctness_rate * 100 < 80) {
                            this.status = false;
                        } else {
                            this.status = true;
                        }
                        this.detail();
                    }
                }
            );
        },
        detail() {
            getInterestDetail({ chapterids: this.datas.zid }).then(res => {
                if (res.code == 200) {
                    var result = res.data[0];
                    console.log("result", result);
                    // var type = null;
                    if (!result.user_number_pass) {
                        result.user_number_pass = 0;
                    }

                    if (
                        (result.user_number_pass > 0 &&
                            result.user_number_pass < result.number_pass &&
                            result.master_degree == 2) ||
                        (result.user_number_pass == result.number_pass &&
                            result.master_degree != 2)
                    ) {
                        // type = 2;
                        this.stateName = "重新闯关";
                    } else {
                        // type = 1;
                    }
                    console.log("stateName", this.stateName);
                }
            });
        },
        // 关闭学情分窗口
        confirm() {
            this.isPropup = 0;
        },
        // 重新、继续闯关
        gobereaking() {
            var type = 1;
            if (this.stateName == "重新闯关") {
                type = 2;
            }
            this.$router.push({
                path: "/InterestingPractice/breakThrough/index",
                query: {
                    sid: this.datas.sid,
                    zid: this.datas.zid,
                    section_name: this.section_name,
                    type: type
                }
            });
        },
        // 获取试题解析列表
        getInterestAnalysis() {
            InterestAnalysis({
                interest_id: this.interest_id,
                is_get_answer: 2,
                is_out_html: 2,
                allowable_tags: "<img>"
            }).then(res => {
                if (res.code == 200) {
                    var questionList = res.data.question_lists;
                    latex_reques(questionList, "question_title"); //解析 试题标题 latex 公式转换
                    latex_reques(questionList, "question_analysis"); //解析 试题解析 latex 公式转换
                    latex_answer(questionList, "answer_list"); //解析答案选项 latex 公式转换
                    this.datas1 = getAnalysis(
                        questionList,
                        "interest_lists_log"
                    );
                    for (let i = 0; i < this.datas1.length; i++) {
                        this.datas1[i].isShowSub = false; //查看子题
                        if (this.datas1[i].is_favorite == 1) {
                            this.datas1[i].is_check = true;
                        }
                        this.datas1[i].question_type_name = getTypeName(
                            this.datas1[i].question_typeid
                        );
                        if (this.datas1[i].is_sub_question == 2) {
                            this.datas1[i].isShowSubText = true; //查看子题文字
                            latex_reques(
                                this.datas1[i].sub_question_list,
                                "question_title"
                            );
                            latex_reques(
                                this.datas1[i].sub_question_list,
                                "question_analysis"
                            ); //解析 试题解析 latex 公式转换
                            latex_answer(
                                this.datas1[i].sub_question_list,
                                "answer_list"
                            ); //解析答案选项 latex 公式转换
                            this.datas1[i].sub_question_list = getAnalysis(
                                this.datas1[i].sub_question_list,
                                "interest_lists_log"
                            );
                            for (
                                let j = 0;
                                j < this.datas1[i].sub_question_list.length;
                                j++
                            ) {
                                if (
                                    this.datas1[i].sub_question_list[j]
                                        .is_favorite == 1
                                ) {
                                    this.datas1[i].sub_question_list[
                                        j
                                    ].is_check = true;
                                }
                                this.datas1[i].sub_question_list[
                                    j
                                ].question_type_name = getTypeName(
                                    this.datas1[i].sub_question_list[j]
                                        .question_typeid
                                );
                            }
                        }
                    }
                    console.log("this.datas1>>>>>>>>", this.datas1);
                }
            });
        },
        // 前往智趣列表
        toInterestList() {
            this.$router.push({
                path: "/InterestingPractice/practice/index"
            });
        },
        // 查看子试题
        checkSub(index) {
            this.datas1[index].isShowSub = true;
            this.datas1[index].isShowSubText = false;
            this.$forceUpdate();
            console.log("答案解析列表", this.datas1[index]);
        }
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.bodyBox {
    width: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    position: relative;
    padding: 0px 48px 30px 48px;
    box-sizing: border-box;
}
.titleImg {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 0 10px 10px #eeeeee;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    img {
        width: 160px;
        height: 160px;
    }
}
.fractionBox {
    padding-top: 140px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-left: 20px;
    position: relative;
}
.fractionNum {
    font-size: 68px;
    font-weight: bold;
    color: #18db60;
}
.fractionNum1 {
    font-size: 68px;
    font-weight: bold;
    color: #f25427;
}
.rightOk {
    width: 31px;
    height: 31px;
    position: absolute;
    right: -20px;
    top: 150px;
}
.leftStart {
    width: 24px;
    height: 24px;
    position: absolute;
    left: -20px;
    top: 190px;
}
.thankText {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
    margin-top: 15px;
}
.percentage {
    font-size: 34px;
    font-weight: 500;
    color: #18db60;
    margin-top: 15px;
    text-align: center;
}
.percentage1 {
    font-size: 34px;
    font-weight: 500;
    color: #f25427;
    margin-top: 15px;
    text-align: center;
}
.correctRow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }
}
.correctText {
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
}
.analysisTitle {
    margin-top: 47px;
    display: flex;
    justify-content: space-between;
}
.selectBtnGround {
    display: flex;
}
.analysisBtnGround {
    display: flex;
}
.switchBtn {
    display: flex;
    width: 210px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #018854;
    border-radius: 80px;
    margin-right: 10px;
    div {
        width: 105px;
        text-align: center;
        font-size: 14px;
        color: #2d3440;
        cursor: pointer;
    }
}
.isSwicth {
    background: #018854;
    border: 1px solid #018854;
    border-radius: 80px;
    color: #ffffff !important;
}
.analysisBtn1 {
    width: 30%;
    height: 40px;
    line-height: 40px;
    background: #f25427;
    border-radius: 20px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}
.analysisBtn2 {
    width: 132px;
    height: 40px;
    line-height: 40px;
    background: #ffa442;
    border-radius: 20px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
}
.analysisBtn3 {
    width: 132px;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    background: #ffa442;
    font-size: 16px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
}
.analysisTitle2 {
    margin-top: 47px;
    display: flex;
}
.analysisTitleText {
    font-size: 22px;
    font-weight: 500;
    color: #2d3440;
    margin-right: 47px;
}
.boxState {
    display: flex;
    align-items: center;
    div {
        margin: 0 5px;
        font-size: 12px;
        color: #9ea4b0;
    }
}
.correctBox {
    width: 14px;
    height: 14px;
    background: #18db60;
    border: 1px solid #18db60;
}
.errBox {
    width: 16px;
    height: 16px;
    background: #f25427;
    border-radius: 2px;
}
.indexItemBox {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
}
.itemBoxIsTrue {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #18db60;
    border: 1px solid #18db60;
    border-radius: 2px;
    text-align: center;
    color: #ffffff;
    margin: 5px;
}
.itemBoxIsFalse {
    width: 38px;
    height: 38px;
    line-height: 38px;
    background: #f25427;
    border: 1px solid #f25427;
    border-radius: 2px;
    text-align: center;
    color: #ffffff;
    margin: 5px;
}
.time {
    text-align: center;
    margin-top: 20px;
}
.startTime {
    font-size: 16px;
}
.endTime {
    font-size: 16px;
    margin-top: 10px;
}
.bottomBtn {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.backBtn {
    width: 30%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #018854;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
    margin-left: 70px;
}
/* 错题 */
.topic {
    margin-bottom: 24px;
    .topic-item {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
    }
}
.topic-item {
    .topic-item-title {
        font-size: 16px;
        color: #707070;
    }
    .topic-item-answer {
        margin: 10px 0px;
    }
    .div-flex-false {
        display: flex;
        align-items: center;
        color: #707070;
        font-size: 14px;
    }
    .div-flex-true {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        color: #18db60;
    }
    .topic-item-analysis {
        width: 45%;
    }
    .topic-item-label {
        color: #707070;
        font-weight: 550;
        margin-bottom: 8px;
    }
}
.div-flex {
    display: flex;
    align-items: center;
    .topic-item-mark {
        font-size: 16px;
        color: #707070;
    }
    .topic-item-start {
        font-size: 14px;
        color: #9ea4b0;
        width: 66px;
        height: 20px;
        line-height: 20px;
        background: #ffffff;
        text-align: center;
        border: 1px solid #9ea4b0;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 3px;
    }
}
.analysis_text {
    font-size: 14px;
    margin-top: 10px;
    color: #707070;
    display: flex;
}
.checkSub {
    width: 100%;
    text-align: right;
    font-size: 18px;
    color: #18db60;
    cursor: pointer;
}
</style>
